<template>
    <div>
        <div class="header">
            <div class="last" @click="last">返回</div>
            <van-search
                    v-model="value"
                    placeholder="请输入搜索关键词"
                    shape="round"
                    background="skyblue"
                    @keydown.enter="go"
                    class="myinput"
            />
        </div>
            <div v-show="flag" class="text">{{text}}</div>
            <div v-show="!flag" class="content">
                <ul>
                    <li v-for="(item,index) in postList" :key="index">
                        <router-link :to="{path:'/detail',query:{postsId:item.postsId}}" style="color:black">
                            <p style="font-size: 18px">
                                {{item.title}}
                                <span style="float: right;color: gray;font-size: 14px"><van-icon name="eye" style="margin-right: 5px" />{{item.readNum}}&nbsp;&nbsp;<van-icon name="good-job" style="margin-right: 5px" />{{item.zan}}</span>
                            </p>
                            <div class="contentText">
                                <div class="t">
                                    <img :src="item.avatar" alt="" class="ava">
                                    <span style="margin-left: 10px">{{item.userName}}</span>
                                    <p style="margin-top: 5px;">{{item.intro}}</p>
                                </div>
                                <div class="tp">
                                    <img :src="item.coverImgUrl" alt="">
                                </div>
                            </div>
                            <p style="margin-bottom: 5px;color: gray">{{item.createTime}}</p>
                        </router-link>
                    </li>
                </ul>
            </div>
    </div>
</template>

<script>
    import {classifyListTwo} from '../api/api'
    export default {
        name: "SeachHeader",
        data() {
            return {
                value: '',
                postList:[],
                flag:true,
                text:'看看我能，帮到你嘛？😉'
            };
        },
        methods:{
            go(){
                this.text='亲，加载中，请稍后哦！😜'
                classifyListTwo(`${this.value}`).then(res=>{
                    console.log(res)
                    if(res.data.code==0){
                        this.flag = false
                        this.postList = res.data.rows.reverse();
                    }
                    if(res.data.rows.length==0){
                        this.flag = true
                        this.text = "没有相关的哦，换一个吧！😭"
                    }
                    if(this.value == ''){
                        this.flag = true
                        this.text='看看我能，帮到你嘛？😉'
                    }
                })
            },
            last(){
                this.$router.push('/index')
            }
        }
    }
</script>

<style scoped>
    .header {
        display: flex;
        background-color: skyblue;
    }
    .last {
        width: 10%;
        margin-left: 10px;
        line-height: 50px;
    }

    .myinput {
        width: 90%;
    }
    .text {
        height: 80vh;
        line-height: 30vh;
        text-align: center;
        color: gray;
        background-image: url("../assets/机器猫.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .content {
        margin-top: 20px;
        margin-bottom: 80px;
    }
    .content li {
        width: 100%;
        height: 150px;
        padding: 10px;
        /*border: 1px solid red;*/
        margin-bottom: 10px;
        box-sizing: border-box;
    }
    .content li:after {
        content: '';
        display: block;
        height: 1px;
        background-image: linear-gradient(to right,skyblue,hotpink);
    }
    .content p {
        margin: 0;
    }
    .contentText {
        margin-top: 5px;
    }
    .contentText:after {
        content:'';
        display: block;
        clear: both;
    }
    .contentText>div{
        float: left;
    }
    .ava {
        width: 25px;
        height: 25px;
        vertical-align: middle;
    }
    .t {
        width: 70%;
        padding-right: 10px;
        /*height: 50px;*/
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp:3;
        -webkit-box-orient: vertical;
        box-sizing: border-box;
    }
    .tp {
        width: 30%;
        height: 80px;
    }
    .tp>img {
        width: 100%;
        height: 100%;
    }
</style>